<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>
<body>
    <!-- 
        jsonp 原理:  引入资源不受同源策略影响 (link img script 可以引入外部资源, 不受同源策略影响)

            前端: 
               1. 可以创建script标签(手动创建, dom生成), 向对方服务器接口发送请求, 并将请求过来的内容,作为js代码执行
               2. 前端需要提前指定函数 (回调函数)
            后端:  (需要后端配合)
               返回以函数调用格式的数据  => xxx({"a":1,"b":2})

        注意 
            jsonp不是ajax(不需要创建 new XMLHttpRequest()等一系列操作)  => 属于http请求
               
        jsonp优缺点
            JSONP（JSON with Padding）是一种跨域请求数据的方式，它通过动态创建<script>标签请求一个带有回调函数的URL来实现。

            优点： (jsonp不受同源策略影响)

                可以解决AJAX直接请求其他域下资源的限制(受同源策略影响) => 还需要手动配置一系列信息。

                不需要服务器端任何配置更改。 

                请求速度较快

            缺点：

                只支持GET请求，不支持POST等其他类型的HTTP请求。 !!!!!!!!!!!!!!!

                安全性问题，因为返回的数据会作为JavaScript执行，可能会遭受XSS攻击。

                只支持文本数据类型(query传参)的请求，不支持复杂数据类型（如JSON）。

                只支持请求方式，不支持服务器向客户端发送数据。


     -->

    <input type="text" id="searchCon">

   
</body>
<script>
    var searchCon = document.getElementById("searchCon");



    function handlerSearch(data){
        console.log("获取成功",data);
    }


    searchCon.oninput = _.debounce(function(){
        let key = this.value;


        let script = document.createElement("script");
        script.src = `https://www.baidu.com/sugrec?prod=pc&wd=${key}&cb=handlerSearch`;
        script.onload = function(){ // 脚本载入并执行之后  => 删除script (异步)
            script.remove();
        }
        // 将脚本放到页面中时才会发送请求
        document.body.append(script);

    },300)


</script>



<!-- 
    prod=pc  pc端
    wd=xxx   搜索关键词
    cb=xxx   指定接口返回数据时对应的回调函数

    defer    脚本加载异步
 -->
 <!-- <script>
    function haha(data){
        console.log(1111,data);
    }
</script>
<script defer src="https://www.baidu.com/sugrec?prod=pc&wd=JavaScript&cb=haha"></script> -->


</html>